<script setup>
import { ref, reactive, watchEffect } from 'vue'
import { sessionApi } from '@/api'
import sessionDialog from '@/components/sessionDialog.vue'

const sessions = ref([])
const loading = ref(true)

watchEffect(async () => {
    await sessionApi.getSessionsInfos().then((res) => {
        sessions.value = res.data
    })
    loading.value = false
})
const state = reactive({
    dialogShow: false,
    curSession:null
})

const addInformation = () => {
    state.curSession = null
    state.dialogShow = true
}

const eidtInformation = (session) => {
    state.curSession = session
    state.dialogShow = true
}

const deleteInformation = (session) => {
    console.log('删除当条信息',session)
}


function updateSession(info) {
    console.log('子组件上传， 更新', info)
    
}
const dateRanges = ref(null)
watchEffect(() => {
    dateRanges.value = sessions.value.map(v => {
        return [v.startTime,v.endTime]
    })
    // console.log(dateRanges.value)
    
})
</script>

<template>
    <div v-loading="loading" style="width:100%;margin:50px">
        <el-table :data=sessions table-layout="auto" :stripe="true">
            <el-table-column property="sessionName" label="学期" align="center" />
            <el-table-column property="startTime" label="起始时间" align="center" />
            <el-table-column property="endTime" label="结束时间" align="center" />
            <el-table-column label="节次设置" align="center" width="40%">
                <template #default="{ $index, row }">
                    <div style="display:flex;justify-content: space-around">
                        <el-tag v-for="item, index in row.courseContents" :key="index"
                            :type="($index % 2 == 0) ? 'success' : 'primary'" effect="light"
                            style="margin:0,0,20px,20px;width:19%">
                            {{ item }}
                        </el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center">
                <template #header>
                    <el-button @click="addInformation">添加</el-button>
                </template>
                <template #default="scope">
                    <el-button size="small" @click="eidtInformation(scope.row)">修改</el-button>
                    <el-button size="small" type="danger" @click="deleteInformation(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-dialog v-model="state.dialogShow" style="width:65vw;height:40vh">
        <sessionDialog :sessionInfo="state.curSession" :dateRanges @cancel="state.dialogShow =false"
            @update="updateSession" />
    </el-dialog>


</template>